<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button id="start">Start</button>
<button id="cancel">Cancel</button>

<script>
    class CancelToken {
        constructor(cancelFn) {
            this.proimse = new Promise(((resolve, reject) => {
                cancelFn(() => {
                    setTimeout(console.log, 0, 'delay cancelled')
                    resolve()
                })
            }))
        }
    }

    const startButton = document.querySelector('#start')
    const cancelButton = document.querySelector('#cancel')

    function cancellableDelayedResolve(delay) {
        setTimeout(console.log, 0, 'set delay');
        return new Promise(((resolve, reject) => {
            const id = setTimeout(() => {
                setTimeout(console.log, 0, 'delayed resolve');
                resolve();
            }, delay);
            const cancelToken = new CancelToken((cancelCallback) =>
                cancelButton.addEventListener('click', cancelCallback));
            cancelToken.proimse.then(() => clearTimeout(id))
        }))
    }

    startButton.addEventListener('click', () => cancellableDelayedResolve(1000))
    
    // 还剩下一个 promise进度通知,不想了解了
</script>
</body>
</html>